<template>
  <div>
    <el-form :inline="true" class="search-form" label-width="100px" size="medium" style="padding-bottom: 10px;">
      <el-form-item label="贷款类型：">
        <el-select v-model="res.params" placeholder="请选择贷款类型">
          <el-option v-for="item in res.marketOptions" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-table :data="res.tableOptions" size="medium" border stripe class="imp-table" v-loading="res.loading">
      <el-table-column label="车型" width="400" prop="model.modelName"></el-table-column>
      <div v-if="res.params==3">
        <el-table-column label="城市" prop="city.cityName" width="120" align="center"></el-table-column>
        <el-table-column label="是否上牌" prop="clueLicenceState" width="120" align="center"></el-table-column>
        <el-table-column label="车牌号" prop="clueCarPlant" width="120" align="center"></el-table-column>
        <el-table-column label="用户联系方式" prop="clueMobile"></el-table-column>
        <el-table-column label="身份证号" prop="clueIdCard"></el-table-column>
      </div>
      <div v-else>
        <el-table-column label="贷款期数" prop="loanPeriod"></el-table-column>
        <el-table-column label="贷款金额" prop="loanAmount"></el-table-column>
        <el-table-column label="贷款时间" prop="loanTime"></el-table-column>
        <el-table-column label="抵押车辆" prop="loanMortgage"></el-table-column>
      </div>
    </el-table>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        res: {
          marketOptions: [
            {
              name: '保险',
              id: 3
            },
            {
              name: '消费贷',
              id: 1
            },
            {
              name: '库存贷',
              id: 2
            }
          ],
          tableOptions: [],
          params: 3,
          loading: false
        },
        loanType: 1
      }
    },
    created () {
      this.getInsuranceClueList()
    },
    methods: {
      loadingFn () {
        this.$nextTick().then(() => {
          this.res.loading = false
        })
      },
      getInsuranceClueList () {
        this.res.loading = true
        this.$axios.get('/controller/insuranceClue/getInsuranceClueList').then((res) => {
          this.res.tableOptions = res.data.result
          this.res.tableOptions.map(item => {
            item.clueLicenceState = ~~item.clueLicenceStatus === 1 ? '已上牌' : '未上牌'
          })
          this.loadingFn()
        })
      },
      getLoanClueList () {
        this.res.loading = true
        this.$axios.get('/controller/loanClue/getLoanClueList', {
          params: {
            loanType: this.loanType
          }
        }).then((res) => {
          this.res.tableOptions = res.data.result
          this.loadingFn()
        })
      }
    },
    watch: {
      'res.params' () {
        switch (this.res.params) {
          case 1:
            this.loanType = 1
            this.getLoanClueList()
            break
          case 2:
            this.loanType = 2
            this.getLoanClueList()
            break
          case 3:
            this.getInsuranceClueList()
            break
          default:
            break
        }
      }
    }
  }
</script>